---
sidebar_position: 2137 # Last in the section - deprecated
---

<DeprecatedBanner
  text={
    <>
      This API is deprecated and will be removed in the next major release. Use{' '}
      <a href="/docs/threading/scheduleOnUI">scheduleOnUI</a> instead.
    </>
  }
/>

# runOnUI

`runOnUI` lets you asynchronously run [workletized](/docs/fundamentals/glossary#to-workletize) functions on the [UI thread](/docs/fundamentals/glossary#ui-thread).

Most commonly used either with an `useEffect` to start an animation on component mount/unmount or with [`measure`](https://docs.swmansion.com/react-native-reanimated/docs/advanced/measure) and [`scrollTo`](https://docs.swmansion.com/react-native-reanimated/docs/scroll/scrollTo) functions which have implementations only on the UI thread.

## Reference

```javascript
import { runOnUI } from 'react-native-worklets';

function App() {
  // E.g. in event handler or in an effect
  // highlight-next-line
  runOnUI((greeting) => {
    console.log(`${greeting} from the UI thread`);
    // highlight-next-line
  })('Howdy');

  // ...
}
```

<details>
<summary>Type definitions</summary>

```typescript
function runOnUI<A extends any[], R>(
  fn: (...args: A) => R
): (...args: Parameters<typeof fn>) => void;
```

</details>

### Arguments

#### fn

A reference to a function you want to execute on the [UI thread](/docs/fundamentals/glossary#ui-thread) from the [JavaScript thread](/docs/fundamentals/glossary#javascript-thread). Arguments to your function have to be passed to the function returned from `runOnUI` i.e. `runOnUI(myWorklet)(10);`.

### Returns

`runOnUI` returns a function that accepts arguments for the function passed as the first argument.

:::info
Don't forget to call the function returned from `runOnUI`.
:::

## Example

import RunOnUI from '@site/src/examples/RunOnUI';
import RunOnUISrc from '!!raw-loader!@site/src/examples/RunOnUI';

<InteractiveExample
  src={RunOnUISrc}
  component={RunOnUI}
  label="Tap each word"
/>

## Remarks

- When implementing your animations you should first reach for more general solutions such as [`useDerivedValue`](https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue), [`useAnimatedReaction`](https://docs.swmansion.com/react-native-reanimated/docs/advanced/useAnimatedReaction) or running code in gesture callbacks and only use `runOnUI` after you've tried other methods.

- It's a common mistake to execute function inside of runOnUI like this: ~~`runOnUI(myWorklet(10))()`~~. Here, the correct usage would be `runOnUI(myWorklet)(10)`.

- The callback passed as the argument is automatically [workletized](/docs/fundamentals/glossary#to-workletize) and ready to be run on the [UI thread](/docs/fundamentals/glossary#ui-thread).

- Make sure not to execute `runOnUI` on the UI thread as this will result in an error.

- In browsers there's no separate UI thread available. Because of that, on the Web, `runOnUI` behaves similarly to `requestAnimationFrame`. It creates a function that, when called, will be scheduled to run with given arguments on next animation frame.
